<template>
  <div>
    <div class="read-book">
      <h2 class="read-book-title">帮助文档</h2>
      <px-table max-height="calc(100vh - 240px)" :data="tableData" class="custom-table">
        <px-table-column prop="originalName" label="文档标题" min-width="300" fixed="left" show-overflow-tooltip />
        <px-table-column prop="updateTime" label="发布日期" min-width="180" />
        <px-table-column align="center" label="操作" width="100" fixed="right">
          <template #default="scope">
            <px-tooltip content="查看" placement="top">
              <px-button v-has="'ALL_READ_BOOK_DETAIL_BTN'" link type="primary" icon="Tickets" @click="handleDetail(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { query_4, type Query_4Res } from "@/api/readBook";
const tableData = ref<Query_4Res[]>([]);
const handleDetail = row => {
  if (row.fileUrl) {
    window.open(row.fileUrl);
  }
};
const initData = async () => {
  const data = await query_4();
  tableData.value = data;
};
onMounted(() => {
  initData();
});
</script>
<style lang="scss">
@import url("@/style/table.scss");

.read-book {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 126px);
  padding: 0 24px;
  background-color: #fff;
  border-radius: 8px;
}

.read-book-title {
  padding: 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
</style>
